<!-- 仪表盘首页+活动公告区融合线框原型 -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>仪表盘首页+活动公告区 - 线框图原型</title>
  <style>
    body { margin: 0; padding: 0; background: #f6f7fb; font-family: Arial, sans-serif; }
    .sidebar { position: fixed; left: 0; top: 0; width: 220px; height: 100vh; background: #232946; color: #fff; display: flex; flex-direction: column; padding: 24px 0 0 0; box-sizing: border-box; }
    .sidebar .logo { font-size: 1.5rem; font-weight: bold; text-align: center; margin-bottom: 32px; letter-spacing: 2px; }
    .sidebar .menu { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 0 0 0 24px; }
    .sidebar .menu .menu-item { padding: 10px 0; border-radius: 6px 0 0 6px; cursor: pointer; color: #bfc8e2; font-size: 1rem; }
    .sidebar .menu .menu-item.active { background: #e7eaf6; color: #232946; font-weight: bold; }
    .main { margin-left: 220px; min-height: 100vh; background: #f6f7fb; }
    .header { display: flex; align-items: center; justify-content: space-between; margin: 0 0 24px 0; }
    .title { font-size: 1.6rem; font-weight: bold; color: #232946; margin: 32px 0 0 32px; }
    .search-bar { margin: 32px 32px 0 0; }
    .search-bar input { padding: 8px 16px; border-radius: 8px; border: 1px solid #e0e0e0; font-size: 1rem; background: #f6f7fb; }
    .user-info { display: flex; align-items: center; gap: 16px; }
    .user-avatar { width: 40px; height: 40px; border-radius: 50%; background: #e0e0e0; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: #6a9cfb; font-weight: bold; }
    .banner { margin: 32px 32px 0 32px; background: linear-gradient(90deg,#6a9cfb 0%,#a0e9ff 100%); border-radius: 18px; padding: 36px 32px 32px 32px; color: #fff; position: relative; }
    .banner-title { font-size: 2.2rem; font-weight: bold; margin-bottom: 12px; }
    .banner-desc { font-size: 1.2rem; margin-bottom: 18px; }
    .banner-btns { position: absolute; right: 32px; top: 36px; display: flex; gap: 12px; }
    .banner-btn { background: #fff; color: #6a9cfb; border: none; border-radius: 8px; padding: 8px 18px; font-size: 1rem; font-weight: bold; cursor: pointer; }
    .banner-btn.analysis { background: #f6f7fb; color: #67c23a; }
    .banner-btn.performance { background: #f6f7fb; color: #ff9800; }
    .banner-btn.stable { background: #f6f7fb; color: #faad14; }
    .banner-tabs { display: flex; gap: 24px; margin-top: 18px; }
    .banner-tab { background: rgba(255,255,255,0.12); border-radius: 8px; padding: 8px 24px; font-size: 1.1rem; color: #fff; font-weight: bold; }
    .card-row { display: flex; gap: 24px; margin: 32px 32px 0 32px; }
    .stat-card { flex: 1; background: #fff; border-radius: 18px; box-shadow: 0 2px 8px rgba(80,60,180,0.06); padding: 24px 32px; display: flex; align-items: center; gap: 18px; }
    .stat-icon { width: 48px; height: 48px; border-radius: 12px; background: #f6f7fb; display: flex; align-items: center; justify-content: center; font-size: 2rem; }
    .stat-info { flex: 1; }
    .stat-title { font-size: 1.1rem; color: #888; margin-bottom: 6px; }
    .stat-value { font-size: 1.5rem; font-weight: bold; }
    .quick-row { display: flex; gap: 24px; margin: 32px 32px 0 32px; }
    .quick-card { flex: 1; background: #fff; border-radius: 18px; box-shadow: 0 2px 8px rgba(80,60,180,0.06); padding: 24px 32px; }
    .quick-title { font-size: 1.1rem; color: #faad14; font-weight: bold; margin-bottom: 12px; }
    .quick-btns { display: flex; gap: 18px; flex-wrap: wrap; }
    .quick-btn { background: #e7eaf6; color: #6a9cfb; border: none; border-radius: 8px; padding: 16px 32px; font-size: 1.2rem; font-weight: bold; cursor: pointer; margin-bottom: 8px; }
    .status-card { flex: 1; background: #fff; border-radius: 18px; box-shadow: 0 2px 8px rgba(80,60,180,0.06); padding: 24px 32px; margin-left: 24px; }
    .status-title { font-size: 1.1rem; color: #409eff; font-weight: bold; margin-bottom: 12px; }
    .status-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
    .status-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
    .status-dot.green { background: #67c23a; }
    .status-dot.orange { background: #ff9800; }
    .status-dot.blue { background: #409eff; }
    .status-label { font-size: 1rem; color: #888; flex: 1; }
    .status-bar { flex: 1; height: 8px; border-radius: 4px; background: #e0e0e0; position: relative; }
    .status-bar-inner { height: 100%; border-radius: 4px; position: absolute; left: 0; top: 0; }
    .status-bar-inner.green { background: #67c23a; width: 100%; }
    .status-bar-inner.orange { background: #ff9800; width: 75%; }
    .status-bar-inner.blue { background: #409eff; width: 37%; }
    /* 活动公告区样式 */
    .activity-row { display: flex; gap: 24px; margin: 32px 32px 0 32px; }
    .activity-card { flex: 1; background: #fff; border-radius: 18px; box-shadow: 0 2px 8px rgba(80,60,180,0.06); padding: 24px 32px; min-height: 260px; display: flex; flex-direction: column; }
    .activity-title { font-size: 1.1rem; font-weight: bold; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
    .activity-desc { color: #888; font-size: 0.98rem; margin-bottom: 12px; }
    .activity-big-text { font-size: 2.6rem; font-weight: bold; color: #222; margin: 32px 0 0 0; font-family: 'Arial Black', Arial, sans-serif; letter-spacing: 2px; text-shadow: 2px 2px 0 #fff, 3px 3px 0 #000; line-height: 1.1; }
    .activity-link { color: #409eff; font-size: 1rem; margin-top: auto; text-decoration: underline; cursor: pointer; }
    .activity-data-list { display: flex; flex-direction: column; gap: 16px; margin-top: 18px; }
    .activity-data-item { background: linear-gradient(90deg,#3ecf8e 0%,#6a9cfb 100%); color: #fff; border-radius: 12px; padding: 18px 24px; font-size: 1.2rem; font-weight: bold; display: flex; align-items: center; gap: 16px; }
    .activity-data-item.purple { background: linear-gradient(90deg,#6a9cfb 0%,#a0e9ff 100%); }
    .activity-data-item.orange { background: linear-gradient(90deg,#ffb347 0%,#ffcc80 100%); color: #fff; }
    .activity-data-item .icon { font-size: 1.3rem; margin-right: 8px; }
  </style>
</head>
<body>
  <div class="sidebar">
    <div class="logo">SG3L</div>
    <div class="menu">
      <div class="menu-item">分析页</div>
      <div class="menu-item active">仪表盘</div>
      <div class="menu-item">监控页</div>
      <div class="menu-item">模板中心</div>
      <div class="menu-item">组件中心</div>
      <div class="menu-item">日志中心</div>
      <div class="menu-item">权限管理</div>
      <div class="menu-item">用户管理</div>
      <div class="menu-item">角色管理</div>
      <div class="menu-item">系统设置</div>
    </div>
  </div>
  <div class="main">
    <div class="header">
      <div class="title">仪表盘</div>
      <div class="search-bar"><input type="text" placeholder="搜索..." /></div>
      <div class="user-info">
        <div class="user-avatar">S</div>
        <span>superadmin</span>
      </div>
    </div>
    <div class="banner">
      <div class="banner-title">问候语</div>
      <div class="banner-desc">日期/天气<br>查看数据概览</div>
      <div class="banner-btns">
        <button class="banner-btn">+ 新增用户</button>
        <button class="banner-btn">已权限管理</button>
        <button class="banner-btn">系统设置</button>
        <button class="banner-btn analysis">数据分析</button>
        <button class="banner-btn performance">性能优秀</button>
        <button class="banner-btn stable">运行稳定</button>
      </div>
      <div class="banner-tabs">
        <div class="banner-tab">实时数据 活跃用户</div>
        <div class="banner-tab">实时数据 今日获益</div>
      </div>
    </div>
    <div class="card-row">
      <div class="stat-card">
        <div class="stat-icon" style="background:#e7eaf6;color:#6a9cfb;">👤</div>
        <div class="stat-info">
          <div class="stat-title">实时数据</div>
          <div class="stat-value">总用户数</div>
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-icon" style="background:#e7eaf6;color:#3ecf8e;">🟩</div>
        <div class="stat-info">
          <div class="stat-title">实时数据</div>
          <div class="stat-value">活跃用户</div>
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-icon" style="background:#e7eaf6;color:#ff9800;">🟨</div>
        <div class="stat-info">
          <div class="stat-title">实时数据</div>
          <div class="stat-value">新增用户</div>
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-icon" style="background:#e7eaf6;color:#faad14;">🟥</div>
        <div class="stat-info">
          <div class="stat-title">实时数据</div>
          <div class="stat-value">总登录次数</div>
        </div>
      </div>
    </div>
    <div class="quick-row">
      <div class="quick-card">
        <div class="quick-title">⚡ 快捷操作</div>
        <div class="quick-btns">
          <button class="quick-btn">快捷方式1</button>
          <button class="quick-btn">快捷方式2</button>
          <button class="quick-btn">快捷方式3</button>
          <button class="quick-btn">快捷方式4</button>
        </div>
      </div>
      <div class="status-card">
        <div class="status-title">系统状态</div>
        <div class="status-row">
          <span class="status-dot green"></span>
          <span class="status-label">服务器状态</span>
          <div class="status-bar"><div class="status-bar-inner green"></div></div>
        </div>
        <div class="status-row">
          <span class="status-dot orange"></span>
          <span class="status-label">内存使用</span>
          <div class="status-bar"><div class="status-bar-inner orange"></div></div>
        </div>
        <div class="status-row">
          <span class="status-dot blue"></span>
          <span class="status-label">CPU 使用率</span>
          <div class="status-bar"><div class="status-bar-inner blue"></div></div>
        </div>
      </div>
    </div>
    <!-- 活动公告区 -->
    <div class="activity-row">
      <div class="activity-card">
        <div class="activity-title">🕒 最近活动</div>
        <div class="activity-desc">系统操作日志</div>
        <div class="activity-big-text">用户实时<br>日志数据</div>
        <div class="activity-link">查看全部活动</div>
      </div>
      <div class="activity-card">
        <div class="activity-title">📢 通知公告</div>
        <div class="activity-desc">重要消息提醒</div>
        <div class="activity-big-text">系统公告</div>
      </div>
      <div class="activity-card">
        <div class="activity-title">📊 数据概览</div>
        <div class="activity-desc">关键指标汇总</div>
        <div class="activity-data-list">
          <div class="activity-data-item"><span class="icon">💰</span>今日销售 <span style="margin-left:auto;">¥0.0k</span></div>
          <div class="activity-data-item purple"><span class="icon">📦</span>新订单 <span style="margin-left:auto;">0</span></div>
          <div class="activity-data-item orange"><span class="icon">🎯</span>转化率 <span style="margin-left:auto;">0%</span></div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
